<template>
  <div class="count-down">
    <span class="count-down-end-time">{{endHours}}点场</span>
    <span class="count-down-surplus">{{surplus | timeFilter}}</span>
  </div>
</template>
<script>
export default {
  props: {
    endHours: {
      type: Number,
      default: 0,
      required: true
    }
  },
  data () {
    return {
      // 活动状态
      surplus: '',
      // 距离活动开始时间的秒数
      diffSeconds: ''
    }
  },
  created () {
    this.computedSurplus()
  },
  methods: {
    computedSurplus () {
      const date = new Date()
      if (date.getHours() > this.endHours) {
        this.surplus = '活动已结束'
        return
      }
      if (date.getHours() == this.endHours) {
        this.surplus = '活动进行中'
        return
      }
      const diffHours = this.endHours - date.getHours() - 1
      const diffMinutes = 60 - date.getMinutes() - 1
      const diffSeconds = 60 - date.getSeconds() - 1
      this.diffSeconds = diffHours * 3600 + diffMinutes * 60 + diffSeconds
      this.interval = setInterval(() => {
        this.diffSeconds = this.diffSeconds - 1
      }, 1000);
      if (this.diffSeconds === 0) {
        this.computedSurplus()
      }
    }
  },
  watch: {
    diffSeconds (val) {
      const hours = Math.floor(val / 3600)
      const minutes = Math.floor(val / 60) % 60
      const seconds = val % 60
      this.surplus = hours + ':' + minutes + ':' + seconds
    },
    endHours () {
      this.computedSurplus()
    }
  }
}
</script>
<style scoped lang = 'scss'>
@import "@css/style.scss";
@import "@css/variable.scss";
.count-down {
  font-size: px2rem($infoSize);
  display: inline-block;
  margin-left: px2rem($marginSize);
  span {
    display: inline-block;
    padding: px2rem(2) px2rem(4);
  }
  &-end-time {
    background: $MainColor;
    border-radius: px2rem(4) 0 0 px2rem(4);
    border: px2rem(1) solid $MainColor;
    color: white;
  }
  &-surplus {
    border-radius: 0 px2rem(4) px2rem(4) 0;
    border: px2rem(1) solid $MainColor;
    color: $MainColor;
  }
}
</style>